<template>

  <ul v-if="caret" class="role-list">
    <li class="role-item" v-for="item in list" :key="item.id">
      <div class="role-tag">
        <el-tag effect="dark" :type="type"  closable>{{ item.authName }}</el-tag>
        <i class="el-icon-caret-right"></i>
      </div>
      <slot :list="item.children||[]"></slot>
    </li>
  </ul>

  <ul v-else class="role-list">
    <li class="role-item" style="flex-wrap: wrap;">
      <div class="role-tag" v-for="item in list" :key="item.id">
        <el-tag effect="dark" :type="type"  closable>{{ item.authName }}</el-tag>
      </div>
    </li>
  </ul>

</template>

<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return []
            }
        },
        type:{
            type:String,
            default:""
        },
        caret:{
            type:Boolean,
            default:false
        }
    }
}
</script>
<style lang="less" scoped>
.role-list{
  list-style: none;
  padding: 0px;
  margin: 0px;
  .el-tag{
    margin: 10px 4px;
  }
}
.role-item{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  border-bottom: 1px solid #dedede;
  &:last-child{
    border-bottom: none;
  }
}
.role-item .role-tag{
  flex-shrink: 0;
  margin-right: 20px;
}
.role-item .role-list{
  flex-grow: 1;
}
.role-box{
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  margin: 20px;
}
</style>